import React, { Component } from 'react'
import { connect } from 'react-redux'
import * as utility from 'utility'
import {
  Form, Input, Button, Icon, Radio, message
} from 'antd';
const FormItem = Form.Item
class RegisterForm extends Component {
  validateToNextPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && form.getFieldValue('confirm')) {
      form.validateFields(['confirm'], { force: true });
    }
    callback();
  }
  compareToFirstPassword = (rule, value, callback) => {
    const form = this.props.form;
    if (value && value !== form.getFieldValue('password')) {
      callback('Two passwords that you enter is inconsistent!');
    } else {
      callback();
    }
  }
  handleSubmit = (e) => {
    e.preventDefault()
    const { form, dispatch } = this.props
    form.validateFields((err, values) => {
      if (!err) {
        const salt = 'cs_asdkj5767_***'
        values.password = utility.md5(utility.md5(values.password + salt))
        values.confirm = utility.md5(utility.md5(values.confirm + salt))
        dispatch({
          type: 'asyncRegister',
          payload: values,
          callback: (res) => {
            const { code, msg } = res
            if (code === 200) {
              message.success(msg)
              const url = values.type === 'boss' ? '/bossInfo' : '/geniusInfo'
              this.props.history.push(url)
            } else {
              message.warn(msg)
            }
          }
        })
      }
    });
  }
  render() {
    const { getFieldDecorator } = this.props.form
    return (
      <div className="register-page">
        <h1>register</h1>
        <Form onSubmit={this.handleSubmit}>
          <FormItem >
            {
              getFieldDecorator('userName', {
                rules: [{ required: true, message: 'Please input your username!' }],
              })(
                <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
              )
            }
          </FormItem>
          <FormItem>
            {
              getFieldDecorator('password', {
                rules: [{
                  required: true, message: 'Please input your password!'
                }, {
                  validator: this.validateToNextPassword
                }]
              })(
                <Input type="password" prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="password" />
              )
            }
          </FormItem>
          <Form.Item>
            {getFieldDecorator('confirm', {
              rules: [{
                required: true, message: 'Please confirm your password!',
              }, {
                validator: this.compareToFirstPassword,
              }],
            })(
              <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="confirm password" />
            )}
          </Form.Item>
          <Form.Item>
          {getFieldDecorator('type', {
            initialValue: 'boss'
          })(
            <Radio.Group>
              <Radio.Button value="boss">boss</Radio.Button>
              <Radio.Button value="genius">genius</Radio.Button>
            </Radio.Group>
          )}
        </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
            >
              Register
            </Button>
          </Form.Item>
        </Form>
      </div>
    )
  }
}
const Register = Form.create()(RegisterForm)

export default connect(state => ({

}))(Register)